# components/custom-nav/custom-nav.vue
<template>
	<view>
		<view :style="{height: statusBarHeight + navBarHeight + 'px'}"></view>
		<view class="custom-nav" :style="{height: statusBarHeight + navBarHeight + 'px'}">
			<view :style="{height: statusBarHeight + 'px'}"></view>

			<view class="nav-content" :style="{height: navBarHeight + 'px'}">
				<view class="team-info" @tap="openTeamPopup">
					<image
						:src="currentTeam.imagePath ? 'data:image/png;base64,' + currentTeam.imagePath : '/static/default-avatar.png'"
						mode="aspectFill" class="team-avatar" />
					<text class="team-name">{{ currentTeam.teamName || '暂无团队，请创建' }}</text>
					<image src="/static/image/exchange.png" class="switch-icon" />
				</view>
			</view>

			<uni-popup ref="teamPopup" type="bottom" @change="onPopupChange">
				<view class="team-popup">
					<view class="popup-header">
						<text class="title">切换团队</text>
						<view @tap="closeTeamPopup">
							<uni-icons type="closeempty" size="20" />
						</view>
					</view>

					<scroll-view scroll-y class="team-list" :style="{maxHeight: scrollViewHeight + 'px'}">
						<block v-for="(team, index) in teamList" :key="team.teamId">
							<view class="team-item" :class="{'active': team.teamId === currentTeam.teamId}"
								@tap="switchTeam(team)">
								<image
									:src="team.imagePath ? 'data:image/png;base64,' + team.imagePath : '/static/default-avatar.png'"
									class="team-avatar" mode="aspectFill" />
								<text class="team-item-name">{{ team.teamName }}</text>
								<uni-icons v-if="team.teamId === currentTeam.teamId" type="checkmarkempty" size="18"
									color="#007AFF" />
							</view>
						</block>
					</scroll-view>

					<view class="create-team" @tap="createTeam">
						<uni-icons type="plusempty" size="20" color="#007AFF" />
						<text>创建新团队</text>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 44,
				currentTeam: {
					teamId: '',
					teamName: '暂无团队，请创建',
					imagePath: ''
				},
				teamList: [],
				scrollViewHeight: 500, // 默认高度
				isPopupShow: false
			}
		},

		props: {
			show: {
				type: Boolean,
				default: true
			}
		},

		watch: {
			show: {
				handler(newVal) {
					if (newVal) {
						this.getTeamInfo()
						this.getTeamList()
					}
				},
				immediate: true
			}
		},

		created() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			// 获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect()
			this.navBarHeight = menuButton.height + (menuButton.top - systemInfo.statusBarHeight) * 2
			// 计算scroll-view高度
			this.scrollViewHeight = systemInfo.windowHeight * 0.6
		},

		methods: {
			// 获取当前团队信息
			getTeamInfo() {
				try {
					const currentTeam = uni.getStorageSync('TheChoosenTeam')
					if (currentTeam) {
						this.currentTeam = currentTeam
					}
				} catch (error) {
					console.error('获取团队信息失败', error)
				}
			},

			// 获取团队列表
			async getTeamList() {
				try {
					const res = await api.getJoinTeams()
					if (res.data.data) {
						this.teamList = res.data.data
					} else {
						uni.showToast({
							title: '请先创建团队！',
							icon: 'none'
						})
						this.openTeamPopup()
					}
				} catch (error) {
					console.error('获取团队列表失败', error)
					uni.showToast({
						title: '获取团队列表失败',
						icon: 'none'
					})
				}
			},

			// 打开团队切换弹窗
			openTeamPopup() {
				if (!this.isPopupShow) {
					this.$refs.teamPopup.open()
				}
			},

			// 关闭团队切换弹窗
			closeTeamPopup() {
				if (this.isPopupShow) {
					this.$refs.teamPopup.close()
				}
			},

			// 监听弹窗状态变化
			onPopupChange(e) {
				this.isPopupShow = e.show
			},

			// 切换团队
			async switchTeam(team) {
				if (team.teamId === this.currentTeam.teamId) {
					this.closeTeamPopup()
					return
				}

				try {
					uni.setStorageSync('TheChoosenTeam', team)
					this.currentTeam = team
					this.$emit('team-changed')
					uni.showToast({
						title: '切换成功',
						duration: 1500
					})
				} catch (error) {
					console.error('切换团队失败', error)
					uni.showToast({
						title: '切换失败',
						icon: 'none'
					})
				}
				this.closeTeamPopup()
			},

			// 创建新团队
			createTeam() {
				this.closeTeamPopup()
				uni.navigateTo({
					url: '/pages/team_create/team_create'
				})
			}
		}
	}
</script>

<style lang="scss">
	.custom-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: #FFFFFF;
	}

	.nav-content {
		padding: 0 32rpx;
	}

	.team-info {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.team-avatar {
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		background: #f5f5f5;
	}

	.team-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin: 0 16rpx;
		max-width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.switch-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.team-popup {
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
		overflow: hidden;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.team-list {
		padding: 0 32rpx;
	}

	.team-item {
		display: flex;
		align-items: center;
		padding: 32rpx 0;
		border-bottom: 1rpx solid #F5F5F5;

		&.active {
			background-color: #F8F8F8;
		}
	}

	.team-item-name {
		flex: 1;
		margin-left: 24rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.create-team {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 32rpx;
		border-top: 1rpx solid #EEEEEE;

		text {
			margin-left: 8rpx;
			color: #007AFF;
			font-size: 30rpx;
		}
	}
</style>